<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模块</title>
        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://unpkg.com/vuex@next"></script>
        <style>
            .row { display: flex ; }
            .row>* { flex-basis: 200px ; font-weight: normal ; }
        </style>
    </head>
    <body>

        <div id="app">
            <div v-for="(s,i) in studentList" :key="s.id" class="row">
                <b>{{ i + 1 }}</b>
                <b>{{ s.id }}</b>
                <b>{{ s.name }}</b>
                <b>{{ s.gender }}</b>
                <a href="#" @click.prevent.stop="removeStudent(s.id)">删除</a>
            </div>

            <hr>

            <div v-for="(b,i) in bookList" :key="b.id" class="row">
                <b>{{ i + 1 }}</b>
                <b>{{ b.id }}</b>
                <b>{{ b.name }}</b>
                <b>{{ b.price }}</b>
                <a href="#" @click.prevent.stop="removeBook(b.id)">删除</a>
            </div>

            <hr>

            <button type="button" @click.prevent.stop="hello">hello</button>

        </div>

        <script>

            const first = {
                state:{
                    books: [
                        { id: 1234 , name: 'Vue.js从入门到实战',price: 98 },
                        { id: 2345 , name: 'React实战',price: 68 },
                        { id: 3456 , name: 'JavaScript权威指南',price: 88 }
                    ]
                },
                getters: {
                    bookList: state => state.books
                },
                mutations:{
                    removeBook(state,id){
                        let index = state.books.findIndex( stu => stu.id == id );
                        if( index != -1 ){
                            state.books.splice( index , 1 );
                        }
                    }
                },
                actions: {
                    removeBook(context,id) {
                        context.commit( 'removeBook' , id );
                    }
                }
            }

            const second = {
                state:{
                    students: [
                        { id: 1234 , name: '朱亚红',gender: '女' },
                        { id: 2345 , name: '郑娅婷',gender: '女' },
                        { id: 3456 , name: '马俊珍',gender: '女' }
                    ]
                },
                getters: {
                    studentList: state => state.students
                },
                mutations:{
                    removeStudent(state,id){
                        let index = state.students.findIndex( stu => stu.id == id );
                        if( index != -1 ){
                            state.students.splice( index , 1 );
                        }
                    }
                },
                actions: {
                    removeStudent(context,id) {
                        context.commit( 'removeStudent' , id );
                    }
                }
            }

            const store = Vuex.createStore({
                modules: {
                    first,
                    second
                }
            });

            const app = Vue.createApp({
                computed: {
                    ...Vuex.mapGetters([ 'bookList' , 'studentList' ])
                },
                methods: {
                    hello(){
                        console.log( this.$store );
                    },
                    ...Vuex.mapActions(['removeBook','removeStudent'])
                }
            });

            app.use( store );

            app.mount( '#app' )
        </script>

    </body>
</html>